<template>
  <div class="login-container">
    <div class="login-background">
      <div class="login-box">
        <div class="login-header">
          <h1>智慧酒店管理系统</h1>
          <p>欢迎登录</p>
        </div>
        
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="0"
          class="login-form"
          :size="formSize"
          status-icon
        >
          <el-form-item prop="LoginName">
            <el-input 
              v-model="ruleForm.LoginName"  
              placeholder="请输入账户" 
              prefix-icon="User"
              size="large"
            />
          </el-form-item>

          <el-form-item prop="LoginPwd">
            <el-input 
              v-model="ruleForm.LoginPwd" 
              type="password" 
              placeholder="请输入密码" 
              prefix-icon="Lock"
              show-password
              size="large"
            />
          </el-form-item>

          <el-form-item prop="verify">
            <div class="verify-container">
              <el-input 
                v-model="ruleForm.verify"  
                placeholder="请输入验证码" 
                prefix-icon="Key"
                size="large"
              />
              <el-button 
                @click="den()" 
                class="verify-btn"
                size="large"
              >
                {{ math }}
              </el-button>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button 
              type="primary" 
              @click="submitForm(ruleFormRef)"
              class="login-btn"
              size="large"
            >
              登录
            </el-button>
            <el-button 
              @click="resetForm(ruleFormRef)"
              class="reset-btn"
              size="large"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref,onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { User, Lock, Key } from '@element-plus/icons-vue'

const math=ref()
const zimu=ref()
const den=()=>{
  math.value=Math.random().toString().substring(2,6);
}

onMounted(()=>{
  den()
})

interface RuleForm {
    LoginName: string
    LoginPwd: string
    verify:''
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    LoginName: '',
    LoginPwd: '',
    verify:''
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
    LoginName: [
    { required: true, message: '账户必填', trigger: 'blur' },
    { min: 1, max: 10, message: '账户不能超过10个字符', trigger: 'blur' },
  ],
  LoginPwd: [
    {
      required: true,
      message: '密码必填',
      trigger: 'blur',
    },
    { min: 3, max: 18, message: '密码最低3位数字', trigger: 'blur' },
  ],

  verify: [
    { required: true, message: '验证码必填', trigger: 'blur' },
  ],
 
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!',ruleForm)

      if(ruleForm.verify!=math.value){
        ElMessage.error('验证码输入有误')
        return;
      }

      axios.post('/api/User/LoginAsync',ruleForm).then(res=>{
        console.log(res);
        if(res.data.code==200){
             console.log("res==",res);

             //返回JWT字符编码
             sessionStorage.setItem("Token",res.data.data.Token)
             //返回名称
             sessionStorage.setItem("UserName",res.data.data.UserName)
             
             // 数据提交后端要加入新的Token值
            axios.defaults.headers.common["Authorization"] = "Bearer " + sessionStorage.getItem("Token");

            
            ElMessage({
            message: '登录成功',
            type: 'success',  
         })
         router.push('/GoodsList')
         
        }else{
            ElMessage.error(''+res.data.msg+'')
        }
        
      })

    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-background {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
}

.login-box {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  width: 400px;
  max-width: 90vw;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h1 {
  color: #333;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-header p {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.login-form {
  margin-top: 20px;
}

.login-form .el-form-item {
  margin-bottom: 20px;
}

.verify-container {
  display: flex;
  gap: 10px;
}

.verify-container .el-input {
  flex: 1;
}

.verify-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-weight: bold;
  min-width: 80px;
}

.login-btn {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  height: 50px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}

.reset-btn {
  width: 100%;
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #666;
  height: 50px;
  font-size: 16px;
}

.login-btn:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.reset-btn:hover {
  background: #e8e8e8;
  border-color: #ccc;
}

.el-input__wrapper {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-input__wrapper:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

@media (max-width: 768px) {
  .login-box {
    width: 90vw;
    padding: 30px 20px;
  }
  
  .login-header h1 {
    font-size: 24px;
  }
}
</style>